<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=0.9">
    <title>学生列表</title>
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootstrap.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1/css/bootoast.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        .my-container {
            height: 100%;
        }

        .table .text {
            /* padding-top: 10px !important; */
        }

        .table th, .table td {
            text-align: center;
        }

        .table td {
            display: table-cell !important;
            vertical-align: middle !important;
        }

        .footer {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
            color: #666;
            text-align: center;
        }
    </style>
    <!-- 引入jquery.js-->
    <script src="./static/bootstrap-3.4.1/js/jquery-3.6.0.min.js"></script>
    <!-- 引入bootstrap.js-->
    <script src="./static/bootstrap-3.4.1/js/bootstrap.js"></script>
    <script src="./static/bootstrap-3.4.1/js/bootoast.js"></script>
    <script>
        /**
         * dom加载完成之后，自动执行
         */
        $(function () {
            let adminHome = new AdminHome();
            // 初始化模态框
            adminHome.initModal();
            // 获取学生列表数据
            adminHome.queryAll(null);
            // 初始化点击事件
            adminHome.click();

        })

        class AdminHome {
            constructor() {
            }

            /**
             * 根据关键字从服务端获取学生列表信息
             * @param keywords：关键字
             * @param flag：首页：homePage,尾页：endPage,上一页：prePage,下一页：nextPage
             * @param page：分页数据
             */
            queryAll(keywords,flag,page) {
                console.log("//////////////////,",keywords,flag,page)
                if (!keywords) {
                    keywords = "";
                }
                // 为了防止添加的数据重复，所以需要清空之前添加的数据
                $(".table tbody").empty();
                // 根据情况组装url
                let url = `/SelectCourse2/student/queryAll?keywords=${keywords}`
                if(flag && page){
                    switch (flag){
                        case 'homePage':// 首页
                            url =`/SelectCourse2/student/queryAll?keywords=${keywords}&currentPage=1`
                            break;
                        case 'endPage':// 尾页
                            url =`/SelectCourse2/student/queryAll?keywords=${keywords}&currentPage=${page.totalPage}`
                            break;
                        case 'prePage':// 上一页
                            url =`/SelectCourse2/student/queryAll?keywords=${keywords}&currentPage=${page.prePage}`
                            break;
                        case 'nextPage':// 下一页
                            url =`/SelectCourse2/student/queryAll?keywords=${keywords}&currentPage=${page.nextPage2}`
                            break;
                    }
                }
                console.log('url:',url);
                // 我们在前端访问服务端接口使用jQuery提供的ajax
                $.ajax({
                    type: 'GET',// 提交方式，跟接口规定的一致
                    url: url,// url服务端的接口地址
                    cache: false,// 不启用缓存
                    dataType: 'json',// 期望后端返回的数据的类型
                    success: function (res) {// success,成功响应后自动执行，res封装后端响应回来的信息
                        console.log("返回学生列表信息", res)
                        console.log("分页信息：",res.page);

                        if (res.code == 1) {// 数据查询成功
                            // 判断后端是否传过来列表数据
                            if (res.result && res.result.length > 0) {// 有数据
                                // 遍历学生数据
                                for (let student of res.result) {
                                    $(`
                                      <tr>
                                        <td class="text">${student.userId}</td>
                                        <td class="text">${student.username}</td>
                                        <td class="text">${student.nickname}</td>
                                        <td>
                                            <img src="static/img/pic7.jpeg" alt="" class="img-circle" style="width:40px;">
                                        </td>
                                        <td class="text">${student.gender}</td>
                                        <td class="text">${student.phone}</td>
                                        <td class="text">${student.specialty}</td>
                                        <td class="text">${student.grade}</td>
                                        <td class="text">
                                           <button type="button" class="btn btn-info" data-toggle="modal" data-target="#exampleModal" data-userid=${student.userId}
                                    data-username=${student.username} data-nickname=${student.nickname} data-gender=${student.gender}
                                    data-phone=${student.phone} data-specialty=${student.specialty} data-grade=${student.grade}>编辑</button>
                                            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal2" data-userid=${student.userId}>删除</button>
                                        </td>
                                      </tr>
                                    `).appendTo($(".table tbody"))
                                }
                            } else {// 无数据
                                $(`
                                  <tr>
                                      <td colspan="9" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                            }
                            // 处理分页数据（）
                            if(res.page){
                                $("#pagination").empty();
                                $("#pagination").append($(`
                                <li><a href="javascript:void(0);" id="homePage">首页</a></li>
                                <li><a href="javascript:void(0);" id="prePage">上一页</a></li>
                                <li><a href="javascript:void(0);" id="nextPage">下一页</a></li>
                                <li><a href="javascript:void(0);" id="endPage">尾页</a></li>
                                <li style="border: none;margin-left: 20px;" disabled>
                                    <span style="color:#888 !important;">当前第${res.page.currentPage}页，共${res.page.totalPage}页</span>
                                </li>
                                `))
                                // 因为这里是动态+异步，所以需要动态传参
                                $("#homePage").click(function (){
                                    pageClick('homePage',res.page)
                                })
                                $("#endPage").click(function (){
                                    pageClick('endPage',res.page)
                                })
                                $("#prePage").click(function (){
                                    pageClick('prePage',res.page)
                                })
                                $("#nextPage").click(function (){
                                    pageClick('nextPage',res.page)
                                })

                            }
                        } else {// 数据查询失败
                            $(`
                                  <tr>
                                      <td colspan="9" style="text-align: center;border:none;padding: 150px 0;">当前没有查询到数据！</td>
                                  </tr>
                                `).appendTo($(".table tbody"))
                        }
                    },
                    error: function (err) {
                        console.log("Error=>", err);
                    }
                })
            }

            /**
             * 管理所有的点击事件
             */
            click() {
                // 点击事件中，无法获取到对象中的this
                let that = this;
                $("#searchBtn").click(function () {
                    // 获取搜索输入框中内容
                    let keywords = $("#searchValue").val();
                    // 访问服务器
                    that.queryAll(keywords);

                })
                // 保存表单
                $("#save-btn").click(function () {
                    that.save();
                })
                // 删除学生
                $("#del-btn").click(function () {
                    let userId = $("#userId2").val();
                    if (userId) {
                        // 提交表单
                        $.ajax({
                            type: 'post',// 提交方式 post
                            url: '/SelectCourse2/student/delete?studentId='+userId,
                            cache: false,// 不启用缓存
                            dataType: 'json',// 期望服务器响应的数据类型 json
                            success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                                console.log(result);
                                // 提示
                                if(result.code==1){
                                    bootoast({
                                        message: result.msg,
                                        type: 'success',
                                        position:'top',
                                        timeout:2
                                    });
                                }else{
                                    bootoast({
                                        message: result.msg,
                                        type: 'danger',
                                        position:'top',
                                        timeout:2
                                    });
                                }
                                //setTimeout(()=>{
                                    // 更新列表
                                    that.queryAll(null);
                                    // 关闭修改模态框
                                    $('#exampleModal2').modal('hide')
                                //},1000)

                            },
                            error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                                // 提示
                                bootoast({
                                    message: '服务器请求错误！',
                                    type: 'danger',
                                    position:'top',
                                    timeout:2
                                });
                            }

                        })
                    }

                });
                // 首页
                // $("#homePage").click(function (){
                //     alert("-------------")
                //     console.log("=============",this.dataset)
                //     that.queryAll($("#searchValue").val(),'homePage',)
                // })
                // 尾页
                // 上一页
                // 下一页
            }

            /**
             * 修改学生信息
             * @returns {boolean}
             */
            save() {
                let that = this;
                // 非空校验
                let userId = $("#userId").val();
                let username = $("#username").val();
                let nickname = $("#nickname").val();
                let gender = $("input[name=gender]:checked").val();
                let phone = $("#phone").val();
                let specialty = $("#specialty").val();
                let grade = $("#grade").val();
                console.log(username, nickname, gender, phone, specialty, grade);
                // 进行非空校验
                if (!nickname || nickname === '') {
                    bootoast({
                        message: '姓名不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!phone || phone === '') {
                    bootoast({
                        message: '手机不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!specialty || specialty === '') {
                    bootoast({
                        message: '专业不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                if (!grade || grade === '') {
                    bootoast({
                        message: '年级不能为空！',
                        type: 'danger',
                        position:'top',
                        timeout:2
                    });
                    return false;
                }
                console.log(`userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&specialty=${specialty}&grade=${grade}`);
                // 提交表单
                $.ajax({
                    type: 'post',// 提交方式 post
                    url: $("#myForm").attr("action"),// /SelectCourse/teacher/update
                    cache: false,// 不启用缓存
                    data: `userId=${userId}&username=${username}&nickname=${nickname}&gender=${gender}&phone=${phone}&specialty=${specialty}&grade=${grade}`,
                    dataType: 'json',// 期望服务器响应的数据类型 json
                    success: function (result) {// 响应成功就会自动执行该方法，result中封装的是响应的结果
                        console.log(result);
                        // 提示
                        bootoast({
                            message: result.msg,
                            type: 'success',
                            position:'top',
                            timeout:2
                        });
                        // 更新列表
                        that.queryAll(null);
                        // 关闭修改模态框
                        $('#exampleModal').modal('hide')
                    },
                    error: function (error) {// 响应失败就会自动执行该方法，error中封装的是错误信息
                        // 提示
                        bootoast({
                            message: '服务器请求错误！',
                            type: 'danger',
                            position:'top',
                            timeout:2
                        });
                    }

                })
                return true;
            }

            /**
             * 管理模态框
             */
            initModal() {
                // 处理修改模态框
                $('#exampleModal').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var userId = button.data('userid');
                    var username = button.data('username');
                    var nickname = button.data('nickname');
                    var gender = button.data('gender');
                    var phone = button.data('phone');
                    var specialty = button.data('specialty');
                    var grade = button.data('grade');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId').val(userId)
                    modal.find('.modal-body #username').val(username)
                    modal.find('.modal-body #nickname').val(nickname)
                    modal.find('.modal-body #phone').val(phone)
                    modal.find('.modal-body #nickname').val(nickname)
                    modal.find('.modal-body #phone').val(phone)
                    modal.find('.modal-body #specialty').val(specialty)
                    modal.find('.modal-body #grade').val(grade)
                    // 处理性别
                    modal.find(`.modal-body input[name=gender][value=${gender}]`).attr("checked", true);
                    // 处理职称
                    // modal.find(`.modal-body #manager option[value='${manager}']`).attr("selected", true);

                })
                // 处理删除模态框
                // 处理模态框
                $('#exampleModal2').on('show.bs.modal', function (event) {
                    // 获取修改按钮
                    var button = $(event.relatedTarget) // Button that triggered the modal
                    // 接收传递的数据
                    var userId = button.data('userid');
                    var modal = $(this)
                    // 绑定数据
                    modal.find('.modal-body #userId2').val(userId);

                })
            }

        }

        /**
         * 分页按钮点击事件
         * @param option
         */
        function pageClick(flag,page){
            let keywords = $("#searchValue").val();
            let adminHome = new AdminHome();
            adminHome.queryAll(keywords,flag,page)


        }

    </script>
</head>

<body>
<div class="container-fluid my-container">
    <!-- 页头 -->
    <ol class="breadcrumb" style="margin-top:5px;">
        <li><a href="#">主页</a></li>
        <li><a href="#">学生管理</a></li>
        <li class="active">学生列表</li>
    </ol>
    <!-- 检索框 -->
    <form class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="searchValue" placeholder="请输入关键字">
        </div>
        <button type="button" class="btn btn-primary" id="searchBtn">搜索</button>
        <!--        <button type="button" class="btn btn-danger">批量删除</button>-->
    </form>
    <!-- 内容 -->
    <div class="panel panel-default" style="margin-top: 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">操作面板</h3>
        </div>
        <div class="panel-body">
            <!-- 表格 -->
            <table class="table table-hover table-condensed table-bordered table-striped">
                <thead>
                <!-- 标题行 -->
                <tr>
                    <th>编号</th>
                    <th width="120">工号</th>
                    <th>姓名</th>
                    <th>头像</th>
                    <th>性别</th>
                    <th>手机</th>
                    <th>专业</th>
                    <th>年级</th>
                    <th width="180">操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 内容行 -->
                </tbody>
            </table>
            <!-- 分页组件 -->
            <nav aria-label="Page navigation">
                <ul class="pagination" id="pagination">
<!--                    <li>-->
<!--                        <a href="#" aria-label="Previous">-->
<!--                            <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    <li><a href="#">1</a></li>-->
<!--                    <li><a href="#">2</a></li>-->
<!--                    <li><a href="#">3</a></li>-->
<!--                    <li><a href="#">4</a></li>-->
<!--                    <li><a href="#">5</a></li>-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Next">-->
<!--                            <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
                </ul>
            </nav>
        </div>
    </div>


    <!-- 尾部 -->
    <div class="footer">技术支持:西安粤嵌信息科技有限公司</div>
</div>
<!-- 模态框 学生信息展示与修改-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">编辑学生信息</h4>
            </div>
            <div class="modal-body">
                <!-- 表单 -->
                <form action="/SelectCourse2/student/update" method="post" id="myForm">
                    <div class="form-group">
                        <label for="username">编<span
                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="userId" id="userId" readonly>
                    </div>
                    <div class="form-group">
                        <label for="username">学<span
                                style="color:transparent;user-select: none;">隐藏</span>号：</label>
                        <input type="text" class="form-control" name="username" id="username" readonly>
                    </div>
                    <div class="form-group">
                        <label for="nickname">姓<span
                                style="color:transparent;user-select: none;">隐藏</span>名：</label>
                        <input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="nickname">性<span
                                style="color:transparent;user-select: none;">隐藏</span>别：</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="gender" id="optionsRadios1" value="男">
                                男
                            </label>
                            &nbsp;&nbsp;
                            <label>
                                <input type="radio" name="gender" id="optionsRadios2" value="女">
                                女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="phone">电<span style="color:transparent;user-select: none;">隐藏</span>话：</label>
                        <input type="text" class="form-control" name="phone" id="phone" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="specialty">专<span style="color:transparent;user-select: none;">隐藏</span>业：</label>
                        <input type="text" class="form-control" name="specialty" id="specialty" placeholder="请输入专业">
                    </div>
                    <div class="form-group">
                        <label for="grade">年<span style="color:transparent;user-select: none;">隐藏</span>级：</label>
                        <input type="text" class="form-control" name="grade" id="grade" placeholder="请输入年级">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="save-btn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--删除元素模态框-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel2"
                    style="border-left: 5px solid dodgerblue;padding-left: 10px;">温馨提示</h4>
            </div>
            <div class="modal-body">
                确定删除当前学生？
                <input type="hidden" id="userId2">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="del-btn">确认</button>
            </div>
        </div>
    </div>
</div>
<script>
    /**
     * 分页按钮点击事件
     * @param keywords
     * @param flag
     * @param page
     */
    // function pageClick(flag,page){
    //     console.log("cese")
    //     // let keywords = $("#searchValue").val();
    //     // let adminHome = new AdminHome();
    //     // adminHome.queryAll(keywords,flag,page);
    // }
</script>
</body>

</html>